<template>
	<view class="nav-bar" :style="{background:bgc, position:pos, color, paddingTop: top}">
		<view class="nav" v-if="!isSearch">
			<view class="left-box"> 
				<image v-if="left&&color=='#333333'" src="/static/icon/navbar/left.png" @tap="leftTap" class="left" />
				<image v-if="left&&color!='#333333'" src="/static/icon/rider/left.png" @tap="leftTap" class="left"/>
			</view>
			<view class="center"> {{ title }} </view>
			<view class="right-box"> 
        <!-- #ifdef APP -->
          <image v-if="right" :src="'/static/icon/navbar/'+right+'.png'" @tap="rightTap" class="right"/>
        <!-- #endif -->
			</view>
		</view>
		<view class="nav-search" v-else>
			<view class="search">
				<input type="text" v-model="val" placeholder="请输入需要搜索的信息" @confirm="confirm" />
				<view class="search-btn" @tap="confirm"> 搜索 </view>
			</view>
		</view>
    <!-- #ifdef MP-WEIXIN -->
      <view class="nav-search search-bot" v-if="right === 'search'">
        <view class="search">
          <input type="text" v-model="val" placeholder="请输入需要搜索的信息" @confirm="confirm" />
          <view class="search-btn" @tap="confirm"> 搜索 </view>
        </view>
      </view>
    <!-- #endif -->
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
  const { statusBarHeight } = uni.getSystemInfoSync()
  const top = computed(() => statusBarHeight + 'px')
	const emit = defineEmits([ 'rightTap', 'leftTap' ])
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		right: {
			type: String,
			default: ''
		},
		left: {
			type: Boolean,
			default: true
		},
		color: {
			type: String,
			default: '#333333'
		},
		bgc: {
			type: String,
			default: '#f4f5f7'
		},
		pos: {
			type: String,
			default: 'sticky'
		},
		page: {
			type: String,
			default: ''
		}
	})
	const val = ref('') // 搜索的信息
	const isSearch = ref(false) // 是否展示搜索框
	const leftTap = () => {
		if(props.page == 'audit') return uni.switchTab({ url: '/pages/mine/mine' })
		if(props.page == 'checkstand') return emit('leftTap')
		uni.navigateBack()
	}
	const rightTap = () => {
		if(props.right=='search') isSearch.value = true
		else emit('rightTap')
	}
	const confirm = () => {
		emit('rightTap', val.value)
		isSearch.value = false
		val.value = ''
	}
</script>

<style lang="scss" scoped>
	.nav-bar {
		// position: sticky;
    padding-top: var(--uni-safe-area-inset-top);
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		.nav {
			height: 44px;
			padding: 0 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left-box {
				width: 16px;
				height: 16px;
				.left {
					width: 16px;
					height: 16px;
				}
			}
			.center {
				font-size: 16px;
				font-weight: 500;
			}
			.right-box {
				width: 16px;
				height: 16px;
				.right {
					width: 16px;
					height: 16px;
				}
			}
		}
		.nav-search {
			height: 44px;
			display: flex;
			padding: 0 12px;
			align-items: center;
			.search {
			  flex: 1;
			  height: 32px;
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  font-size: 14px;
			  padding: 0 2px 0 10px;
			  border-radius: 170px;
			  border: 1px solid rgba(255,59,30,0.5);
			  box-sizing: border-box;
			  input {
			    flex: 1;
					color: #333333;
			    margin: 0 10px;
					font-size: 14px;
					font-weight: 400;
			  }
			  .search-btn {
			    color: #fff;
			    width: 44px;
			    height: 28px;
			    font-weight: 400;
			    text-align: center;
			    line-height: 28px;
			    background-color: #FF3B1E;
			    border-radius: 139px 139px 139px 139px;
			  }
			}
		}
    .search-bot {
      
    }
	}
</style>